<script>
import component_coinvue from './common/coinState.vue'
export default {
    name: 'HomePage',
    components: {
        component_coinvue,
    },
    data() {
    return {
      coinsState: {"TRX":{"blockchain":"TRX","current_support_coin":"BTT","num":1000,"price":0.225,"preday":500},
      "EOS":{"blockchain":"EOS","current_support_coin":"USDT","num":100,"price":2.5,"preday":3},
      "BSC":{"blockchain":"BSC","current_support_coin":"SHIB","num":101,"price":3.5,"preday":3},
      "SOL":{"blockchain":"SOL","current_support_coin":"BONK","num":102,"price":4.5,"preday":3},
      "DFS":{"blockchain":"DFS","current_support_coin":"SATS","num":103,"price":5.5,"preday":3}},
      activeIndex: '0'
    }
  },
  methods: {
    getDataForCoin(coin){
        return this.coinsState[coin]
    }
  },
}
</script>

<template>
    <div class="homepage">
        <component_coinvue class="coinblock coinSOL" :data="getDataForCoin('SOL')"></component_coinvue>
        <component_coinvue class="coinblock coinEOS" :data="getDataForCoin('EOS')"></component_coinvue>
        <component_coinvue class="coinblock coinTRX" :data="getDataForCoin('TRX')"></component_coinvue>
        <component_coinvue class="coinblock coinBSC" :data="getDataForCoin('BSC')"></component_coinvue>
        <component_coinvue class="coinblock coinDFS" :data="getDataForCoin('DFS')"></component_coinvue>
    </div>
</template>

<style lang="less">
.homepage {
    background-color: white;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.coinblock {
    height: 300px;
    width: 300px;
    margin: 10px;
}

</style>